<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合问答</title>
    <link rel="stylesheet" href="../1style/index.css"/>
    <script src="../1style/jquery.js"></script>
</head>
<body>
<h1>综合问答</h1>

<h3>一个面试题的网址</h3>
<div>
    <pre>
        http://interview.poetries.top/
        https://github.com/Liqiuyue9597/front-end-interview
        https://github.com/lgwebdream/FE-Interview
        https://github.com/haizlin/fe-interview
    </pre>
</div>

<h3>浏览器渲染页面的过程</h3>
<div>
    <pre>
        1.浏览器会将HTML解析成一个DOM树
        2.将CSS解析成 CSS Rule Tree 。
        3.根据DOM树和CSSOM来构造Rendering Tree
        4.有了Render Tree，计算出每个节点在屏幕中的位置。
        5.再下一步就是绘制,即遍历render树，并使用UI后端层绘制每个节点。
    </pre>
</div>

<h3>重绘（redraw或repaint）,重排（reflow） </h3>
<div>
    <pre>
        <span>重排必定会引发重绘，但重绘不一定会引发重排</span>
        重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
触发重绘的条件：改变元素外观属性。如：color，background-color等。
注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。
        重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
    </pre>
</div>

<h3>请你谈谈Cookie的弊端</h3>
<div>
    <pre>
    1.IE6或更低版本最多20个cookie 2.IE7和之后的版本最后可以有50个cookie。
    3.Firefox最多50个cookie 4.chrome和Safari没有做硬性限制
    Cookie 可以被禁止, Cookie可以在客户端被篡改
    https://blog.csdn.net/michael8512/article/details/78001562
    </pre>
</div>

<h3>常见前端兼容性问题</h3>
<div>
    <pre>
    0.不同浏览器的标签默认外补丁margin和内补丁padding不同
    1.png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8
    2.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
    </pre>
</div>

<h3>常见ie6的浏览器兼容bug（3-5个）？</h3>
<div>
    <pre>
    1.IE6怪异模型 2.img外部的border 3.png格式图片
    产生条件：IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。 解决办法：设置非浮动元素浮动。
    IE6浏览器，标签的最低高度/宽度设置（min/max-height）
    </pre>
</div>

<h3>如何实现浏览器内多个标签页之间的通信</h3>
<div>
    <pre>
    1.cookie+setInterval，将要传递的信息存储在cookie里面，然后每隔一定时间读取cookie信息来实现。
    2.使用websocket协议 3.通过localstorage 4.WebSocket.onmessage ==== postMessage和onmessage
    </pre>
</div>

<h3>web项目中如何处理安全问题</h3>
<div>
    <pre>
    1，SQL注入,get请求中的一些条件判断,插入数据库
    2，XSS(跨站脚本攻击)。图片,js, 解决:转义html
    3，CSRF: 拿到本地的cookies
    </pre>
</div>

<h3>web中的XSS和CSRF是啥</h3>
<div>
    <pre>
        XSS:跨站脚本攻击,解析html的时候遇到了没有预期到的脚本指令 //https://www.bilibili.com/video/BV1DW411U7XE
        CSRF:跨站请求伪造,拿cookies伪造请求//https://www.bilibili.com/video/BV1iW411171s
            解决: 网页来源ref  加入唯一:token
    </pre>
</div>

<h3>什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？</h3>
<div>
    <pre>
        1，使用import方法导入样式表。 2，将样式表放在页面底部 3，有几个样式表，放在html结构的不同位置。
        解决方法简单的出奇，只要在head之间加入一个link或者script元素就可以了
    </pre>
</div>

<h3><span>命中</span>一个页面从输入 域名URL 到页面加载显示完成，这个过程中都发生了什么？</h3>
<div>
    <pre>
        1.DNS解析 浏览器dns 系统的dns 路由器的dns 网络供应商 .com .baidu www 循环找
        2.TCP链接 TCP三次握手 1.告诉服务器我要发请求了 2.服务器回复我准好了 3. 我马上就发,准备接收吧
        3.发送请求 发通信的内容
        4.响应报文 接受到响应的报文
        5.渲染页面
        6.断开链接
    https://www.bilibili.com/video/av59639585/?p=16
    </pre>
</div>

<h3>简述同步和异步的区别</h3>
<div>
    <pre>
    js的特性单线程。js的大部分编程都是同步的。
每个任务都有一个或者多个回调函数(callback),上一个任务执行完成后，不是立刻执行下一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的，异步是可以提高执行效率
说到这里就不得不说下异步运行机制
1.所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2.主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3.一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4.主线程不断重复上面的第三步
    </pre>
</div>

<h3>javascript同步加载,异步加载和延迟加载</h3>
<div>
    <pre>
    写标签的时候默认是同步加载(阻塞模式)
    异步加载的方案: 动态插入script标签||script标签上添加defer或者async属性
    延迟加载的方案: setTimeout
    </pre>
</div>

<h3>前端页面有哪三层构成，分别是什么？</h3>
<div>
    <pre>
    结构层 Html 表示层 CSS 行为层 js
    </pre>
</div>

<h3>浏览器缓存策略</h3>
<div>
    <pre>
        https://www.bilibili.com/video/BV1i7411f7f4?p=6 // http缓存控制 --key:黑马 前端开发工程师常见面试题讲解
        http缓存, cookie,localstorage,sessionstorage
        https://www.cnblogs.com/lyzg/p/5125934.html
        https://segmentfault.com/a/1190000013854262
        http的缓存机制(https://segmentfault.com/a/1190000013854262)
    </pre>
</div>

<h3>客户端渲染（CSR）VS 服务端渲染(SSR)</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>HTTP的请求方法OPTIONS有啥作用</h3>
<div>
    <pre>
        1、获取服务器支持的HTTP请求方法
        2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。
        对于简单请求，浏览器直接请求，会在请求头信息中，增加一个origin字段，来说明本次请求来自哪个源（协议+域名+端口）。
        比如请求方式是PUT或者DELETE，或者Content-Type字段类型是application/json。都会在正式通信之前，增加一次HTTP OPTIONS请求，称之为预检。
        浏览器会先询问服务器，当前网页所在域名是否在服务器的许可名单之中，服务器允许之后，浏览器会发出正式的XMLHttpRequest请求，否则会报错
    </pre>
</div>

<h3>常见Http请求头</h3>
<div>
    <pre>
        Cookie  由之前服务器通过Set-Cookie（见下文）设置的一个HTTP协议Cookie
        Host
        Referer
        Cache-Control
        Date
    </pre>
</div>

<h3>Http报文的请求会有几个部分</h3>
<div>
    <pre>
    请求行、请求头、请求体
    </pre>
</div>

<h3>什么是MVVM、MVC 有什么区别，原理是什么？</h3>
<div>
    <pre>
    MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）
    MVVM它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，
    因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。
    </pre>
</div>

<h3>介绍HTTPS,介绍下HTTP状态码,HTTPS怎么建立安全通道,HTTPS的加密过程 ,HTTP和HTTPS的区别</h3>
<div>
    <pre>
    HTTP 发送服务器的信息是明文的 可以被供应商拦截
    HTTPS 有加密 拦截下来 也不知道 是啥玩意
    301 请求的网页已永久移动到新位置      304 请求的网页未修改过。
    400 Bad Request     401 Unauthorized    503服务器端暂时无法处理请求
    </pre>
</div>

<h3>你有做过骨架屏吗？它的原理是什么知道吗？</h3>
<div>
    <pre>
    骨架屏的目的和Loading是一样的，安抚用户
    </pre>
</div>

<h3>对于前后端分离，你是怎么理解的</h3>
<div>
    <pre>
    前后端分离模式分化了开发职责，使得前后端开发人员能各司其职，降低了对单一开发人员的技术栈要求
    加速项目迭代，但同时也增加了项目协调成本以及带来跨域等一系列技术问题。
    </pre>
</div>

<h3>ES6中暂时性死区</h3>
<div>
    <pre>
    只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响
    </pre>
</div>

<h3>vue和react的优缺点</h3>
<div>
    <pre>
        1.都是虚拟DOM,单向数据流,数据驱动视图
        2.都有官方脚手架
        3.都是一个js骨架子,需要搭载ui和router ,vuex
        react模版是jsx配合TS很好玩,setState时整个链条都会render
        vue只read使用data的组件
        react属于mvc vue属于mvvm
        https://www.bilibili.com/video/BV1tE411h7pz
    </pre>
</div>

<h3>vue和react的（虚拟Dom/Dom Diff）</h3>
<div>
    <pre>
    ,
    </pre>
</div>

<h3>真实Dom和虚拟Dom的区别</h3>
<div>
    <pre>
        虚拟Dom更新更快
        真实Dom可以直接更新html,虚拟Dom不可以
        真实Dom操作开销比较大,虚拟的很小
    </pre>
</div>

<h3>ES6中函数的默认值,如果传递的是undefind</h3>
<div>
    <pre>
        取默认值,因为undefind和没传值是一样的
    </pre>
</div>

<h3>浅谈浏览器多进程与JS线程</h3>
<div>
    <pre>
    https://segmentfault.com/a/1190000013083967
    </pre>
</div>

<h3>文件上传如何做断点续传</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>


</body>
</html>

<script>
    $(function () {
        $("h3").click(function () {
            $(this).next().toggle();
        });
    })
</script>

